<template>
	<view class="content">
		<!-- 列表 -->
		<block v-for="(item, index) in list">
			<view class="sort-plate-box">
				<view class="txt-info-box">
					<text class="title" v-if="item.name">{{ item.name }}</text>
					<view class="sele-sort-box">
					<text @click="bindFsType(1, item)">男士</text>
					<text @click="bindFsType(2, item)">女士</text>
					<text @click="bindFsType(0, item)">青少年</text>
					</view>
				</view>
				<image :src="item.pic" mode="aspectFit"></image>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				merId: '',
				list: [], // 分类列表
			}
		},
		onLoad(option) {
			const { merId } = option
			this.merId = merId || ''
			this.getList()
		},
		methods:{
			// 获取分类
			getList: async function () {
				uni.showLoading({ title: '加载中' })
				const { code, data, message } = await this.$u.api.productCateApi()
				if (code == '1') {
					console.log('分类list', data)
					this.list = data
				} else {
					this.$showToast(message)
				}
			},
			bindFsType(sex, { name, store_category_id: cid }){	
				this.$gourl(`../../pageIndex/productInfo/dress?sex=${sex}&cid=${cid}&name=${escape(name)}&merId=${this.merId}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		font-family: Microsoft YaHei;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		font-weight: bold;
		.sort-plate-box{
			position: relative;
			line-height: 0;
			margin-bottom: 30rpx;
			background: rgba(0, 0, 0, .8);
			.txt-info-box{
				position: absolute;bottom: 40rpx; z-index: 10;
				width: 100%;
				padding: 0 40rpx;
				line-height: normal;
				.title{
					display: block;
					font-size: 54rpx;
					margin-bottom: 40rpx;
				}
				.sele-sort-box{
					text{
						display: inline-block; 
						font-size: 36rpx;
						margin-right: 30rpx;
						text-decoration: underline;
						font-weight: 400;
					}
				}
			}
			image{width: 100%;height: 600rpx;}
		}
		.sort-plate-box::after{
			position: absolute;top: 0;
			content: '';
			display: block;
			width: 100%;height: 100%;
			background: rgba(0, 0, 0, 0.2);
		}
	}
</style>